<template>
	<view class="list" v-if="show">
		<block v-for="(item, index) in data" :key="index">
			<view class="line" :class="index%2<1 ? 'bg' : ''" v-if="item.type == 'input' && form[item.field]">
				<view class="label">{{item.name}}</view>
				<view class="item">{{form[item.field]}}</view>
			</view>
			<view class="line" :class="index%2<1 ? 'bg' : ''" v-if="item.type == 'textarea' && form[item.field]">
				<view class="label">{{item.name}}</view>
				<view class="item">{{form[item.field]}}</view>
			</view>
			<view class="line" :class="index%2<1 ? 'bg' : ''" v-if="item.type == 'radio' && form[item.field]">
				<view class="label">{{item.name}}</view>
				<view class="item">
					<radio-group>
						<label v-for="(ditem, dindex) in item.datas" :key="dindex" v-if="form[item.field] == ditem.id">
							<radio disabled :value="ditem.id" :checked="true"/>{{ditem.name}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="line" :class="index%2<1 ? 'bg' : ''" v-if="item.type == 'checkbox' && form[item.field].length > 0">
				<view class="label">{{item.name}}</view>
				<view class="item">
					<checkbox-group>
						<label v-for="(ditem, dindex) in item.datas" :key="dindex" v-if="$inArray(form[item.field],ditem.id)">
							<checkbox disabled :value="ditem.id" :checked="true"/>{{ditem.name}}
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="line" :class="index%2<1 ? 'bg' : ''" v-if="item.type == 'datetime' && form[item.field]">
				<view class="label">{{item.name}}</view>
				<view class="item" :style="item.format=='datetime' && 'display:flex;'">
					<picker mode="date" :value="item.date" disabled :style="item.format=='datetime' && 'width: 50%;'">
						<view>{{item.date}}</view>
					</picker>
					<picker v-if="item.format=='datetime'" mode="time" :value="item.time" disabled style="width: 50%;">
						<view>{{item.time}}</view>
					</picker>
				</view>
			</view>
			<view class="line" :class="index%2<1 ? 'bg' : ''" v-if="item.type == 'select' && form[item.field]">
				<view class="label">{{item.name}}</view>
				<view class="item">
					<block v-for="ditem in item.datas" :key="dindex">
						<block v-if="item.multiple">
							<block v-for="fitem in form[item.field]" :key="findex" v-if="fitem==ditem.id">
								{{ditem.name}}
							</block>
						</block>
						<block v-else>
							<block v-if="form[item.field]==ditem.id">
								{{ditem.name}}
							</block>
						</block>
					</block>
				</view>
			</view>
			<view class="line" :class="index%2<1 ? 'bg' : ''" v-if="item.type == 'tree' && form[item.field].length > 0">
				<view class="label">{{item.name}}</view>
				<view class="item">{{jsonData[item.field]}}</view>
			</view>
			<view class="line" :class="index%2<1 ? 'bg' : ''" v-if="item.type == 'uploads' && form[item.field]">
				<view class="label">{{item.name}}</view>
				<view class="item"><img :src="form[item.field]"></view>
			</view>
		</block>
	</view>
</template>
 
<script>
	export default {
		props: {
			form: Object,
			form_id: Number
		},
		data() {
			return {
				show : false,
				data : [],
				jsonData : {}
			}
		},
		watch:{
			form_id(value){
				if(value > 0){
					this.loadData()
				}
			}
		},
		mounted() {
			if(this.form_id > 0){
				this.loadData()
			}
		},
		methods: {
			async searchJson(config){
				if(this.form[config.field]){
					let data = JSON.stringify(await this.$api('GET','json',{url:config.json}))
					let arr = []
					this.form[config.field].forEach(v =>{
						let start = Datas[key].indexOf('{"id":'+v+',')
						let name = Datas[key].indexOf('"name":"',start)
						let desc = Datas[key].indexOf('"desc":"',start)
						let nameend = Datas[key].indexOf('"',name+8)
						let namedata = Datas[key].substring(name+8,nameend)
						if(desc > 0){
							let descend = Datas[key].indexOf('"',desc+8)
							let descdata = Datas[key].substring(desc+8,descend)
						}
						arr.push(namedata+(descdata ? ' '+descdata : ''))
					})
					this.$set(this.jsonData,config.field,arr.join(';'))
				}
			},
			loadData() {
				this.data = this.$getConfig('forms',this.form_id,'data')
				this.show = true
				this.data.forEach(v =>{
					if(v.type == 'datetime'){
						v.date = '2019-12-12'
						v.time = '00:00'
					}
					if(v.type == 'tree'){
						this.searchJson(v)
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	.list{
		margin-top: 20upx;
		background: #ffffff;
		font-size: 24upx;
		.line{
			background-color:#fff;
			display: flex;
			padding: 10upx;
			justify-content:space-between;
			align-items: center;
			border-bottom: 1upx solid #eeeeee;
			&.bg{
				background-color:#ebfff4;
			}
		}
		.label{
			padding-left: 10upx;
			width: 130upx;
			color: #666666;
		}
		.item{
			width: calc(100% - 120upx);
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			word-break:break-all;
			white-space: pre-wrap;
			overflow: hidden;
			text-align: center;
			radio-group{
				display: flex;
				flex-wrap: wrap;
				label{
					white-space:nowrap;
					padding:1upx 10upx 1upx 0;
				}
			}
			checkbox-group{
				display: flex;
				flex-wrap: wrap;
				label{
					white-space:nowrap;
					padding:1upx 10upx 1upx 0;
				}
			}
			picker{
				text-align: center;
			}
		}
	}
</style>
